<template>
	<view class="page">

		<!-- 背景 -->
		<image class="page-bg" mode="widthFix" :src="imageUrl +'list/g-bg.jpg'"></image>

		<!-- 头部 -->
		<u-sticky offset-top="0" :bgColor="bgColor">
			<u-navbar leftText=" " title=" " @rightClick="rightClick" :autoBack="true" placeholder :safeAreaInsetTop="true" :bgColor="bgColor"></u-navbar>
		</u-sticky>

		<!-- 主内容 -->
		<view class="page-content">
			<view class="wp">
				<view class="box-hg1">
					<image class="bg" mode="widthFix" :src="imageUrl + 'hg-bg1.png'"></image>
					<view class="top">
						<view class="t1">账号余额</view>
						<view class="t2">￥<view class="num">100.00</view></view>
					</view>
					<view class="t3">
						<view class="t3-item" @click="popShow1=true">
							<image class="icon" mode="widthFix" :src="imageUrl + 'hg-icon5.png'"></image>
							退款
						</view>
						<view class="t3-item" @click="go('/pages/walletRecords/walletRecords')">
							<image class="icon" mode="widthFix" :src="imageUrl + 'hg-icon6.png'"></image>
							充值记录
						</view>
					</view>
				</view>
			</view>
			<view class="boxHome-hg1">
				<view class="boxAd-hg1">
					<image class="icon" mode="widthFix" :src="imageUrl + 'hg-gif1.png'"></image>
					限时充值福利
					<image class="arrow" mode="widthFix" :src="imageUrl + 'hg-arrow1.png'"></image>
				</view>
				<view class="box-hg2">
					<view class="wp">
						<view class="top-hg1">
							<view class="t1">充值金额</view>
						</view>
						<view class="lst-hg2">
							<view class="item" @click="priceIndex=0" :class="priceIndex==0?'on':''">
								<image v-if="priceIndex==0" class="check" mode="widthFix" :src="imageUrl + 'hg-chk3.png'"></image>
								<view class="t1">￥<view class="num">10</view></view>
							</view>
							<view class="item" @click="priceIndex=1" :class="priceIndex==1?'on':''">
								<image v-if="priceIndex==1" class="check" mode="widthFix" :src="imageUrl + 'hg-chk3.png'"></image>
								<view class="t1">￥<view class="num">20</view></view>
							</view>
							<view class="item" @click="priceIndex=2" :class="priceIndex==2?'on':''">
								<image v-if="priceIndex==2" class="check" mode="widthFix" :src="imageUrl + 'hg-chk3.png'"></image>
								<view class="t1">￥<view class="num">50</view></view>
							</view>
							<view class="item" @click="priceIndex=3" :class="priceIndex==3?'on':''">
								<image v-if="priceIndex==3" class="check" mode="widthFix" :src="imageUrl + 'hg-chk3.png'"></image>
								<view class="t1">￥<view class="num">100</view></view>
							</view>
							<view class="item" @click="priceIndex=4" :class="priceIndex==4?'on':''">
								<image v-if="priceIndex==4" class="check" mode="widthFix" :src="imageUrl + 'hg-chk3.png'"></image>
								<view class="t1">￥<view class="num">200</view></view>
							</view>
							<view class="item" @click="priceIndex=5" :class="priceIndex==5?'on':''">
								<image v-if="priceIndex==5" class="check" mode="widthFix" :src="imageUrl + 'hg-chk3.png'"></image>
								<view class="t1">￥<view class="num">300</view></view>
							</view>
						</view>
					</view>
				</view>
				<view class="box-hg2">
					<view class="wp">
						<view class="top-hg1">
							<view class="t1">其他金额</view>
						</view>
						<view class="form-hg1">
							<form action="">
								<u--input
									placeholder="请输入其他金额"
									placeholderStyle="font-size:28rpx;color: rgba(28, 39, 76, 0.6);"
									customStyle="padding: 0 20rpx; background:#F6F6F6; borderRadius:20rpx; height:88rpx;"
									prefixIcon="rmb"
									prefixIconStyle="margin-right: 32rpx; font-size:28rpx;color: #1C274C;width:24rpx;justify-content: center;"
									border="none"
									clearable
									type="digit"
									v-model="inputVal1"
									@change="change"
								></u--input>
							</form>
						</view>
					</view>
				</view>
				<view class="box-hg2">
					<view class="wp">
						<view class="top-hg1">
							<view class="t1">支付方式</view>
						</view>
						<view class="lst-hg3">
							<view class="item" @click="payIndex=0" :class="payIndex==0?'on':''">
								<image class="icon" mode="widthFix" :src="imageUrl + 'hg-icon7.png'"></image>
								<view class="t1">微信支付</view>
								<image v-if="payIndex!=0" class="arrow" mode="widthFix" :src="imageUrl + 'hg-chk1.png'"></image>
								<image v-if="payIndex==0" class="arrow" mode="widthFix" :src="imageUrl + 'hg-chk2.png'"></image>
							</view>
							<view class="item" @click="payIndex=1" :class="payIndex==1?'on':''">
								<image class="icon" mode="widthFix" :src="imageUrl + 'hg-icon8.png'"></image>
								<view class="t1">钱包支付(￥100)</view>
								<image v-if="payIndex!=1" class="arrow" mode="widthFix" :src="imageUrl + 'hg-chk1.png'"></image>
								<image v-if="payIndex==1" class="arrow" mode="widthFix" :src="imageUrl + 'hg-chk2.png'"></image>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 底部 -->
		<view class="fot-hg1">
			<view class="wp">
				<view class="a1">立即充值</view>
			</view>
		</view>

		<!-- 弹窗 -->
		<u-popup
			:show="popShow1"
			mode="center"
			bgColor="transparent"
			closeable
			@close="popShow1=false"
		>
			<view class="popWin-hg1">
				<image class="bg" mode="widthFix" :src="imageUrl + 'hg-bg2.png'"></image>
				<view class="tit">您确定申请退款？</view>
				<view class="desc">申请成功后，会在3个工作日内原路退回</view>
				<view class="btns">
					<view class="item a1" @click="popShow1=false">取消</view>
					<view class="item a2">确定</view>
				</view>
			</view>
		</u-popup>

	</view>
	
</template>

<script>
	export default {
		data() {
			return {
				// 头部背景色
				bgColor: 'transparent',

				// 充值金额
				priceIndex: 0,
				
				// 输入金额
				inputVal1: '',

				// 支付方式
				payIndex: 0,

				// 退款弹窗
				popShow1: false

			}
		},
		onLoad() {

		},
		methods: {
			// 头部滚动
			onPageScroll(res) {
				if (res.scrollTop >= 60) {
					this.bgColor = '#ffffff'
				} else {
					this.bgColor = 'transparent'
				}
			},
			go(url) {
				uni.navigateTo({
					url: url
				})
			}
		}
	}
</script>

<style lang="scss">

page{
	padding-bottom: calc(constant(safe-area-inset-bottom) + 148rpx);
	padding-bottom: calc(env(safe-area-inset-bottom) + 148rpx);
}

.page{
	min-height: calc(100vh - env(safe-area-inset-bottom) - 148rpx);
}

</style>